<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<style type="text/css">
		/* css 重置 */
		*{margin:0; padding:0; list-style:none; }
		body{ background:#fff; font:normal 12px/22px 宋体; }
		img{ border:0; }
		a{ text-decoration:none; color:#333; }
		a:hover{ color:#1974A1; }
		.js{width:90%; margin:10px auto 0 auto; }
		.js p{ padding:5px 0; font-weight:bold; overflow:hidden; }
		.js p span{ float:right; }.js p span a{ color:#f00; text-decoration:underline; }
		.js textarea{ height:50px; width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa; border-left:2px solid #aaa; }
		/* 本例子css */
		.TB-focus{ width:488px; height:168px; border:1px solid #D8D8D8; position:relative; overflow:hidden; }
		.TB-focus .hd { position:absolute; right:9px; bottom:10px; z-index:1; padding-left:2px; }
		.TB-focus .hd li { color:#f60; cursor:pointer; margin-left:3px; width:18px; height:18px; background:#fff; float:left; font-size:13px; line-height:18px; overflow:visible; text-align:center; opacity:.7; filter:alpha(opacity=70); border:1px solid #d8d8d8; margin-left:-1px; }
		.TB-focus .hd li.on { background:#f60; color:#fff; font-weight:bold; opacity:1; filter:alpha(opacity=100); z-index:2; position:relative; }
	</style>
    <script src="../../../src/js/51ui.js" type="text/javascript"></script>  
    <script type="text/javascript">
        $(function() {
			jQuery(".TB-focus").slide({ mainCell:".bd ul",effect:"fold",autoPlay:true,delayTime:200 });
        })
    </script>
</head>
<body>
	<div style="margin:0 auto" class="TB-focus">
		<div class="hd">
			<ul><li class=" ">1</li>
			<li class=" ">2</li>
			<li class=" ">3</li>
			<li class=" on">4</li>
			<li class=" ">5</li>
			</ul>
		</div>
		<div class="bd">
			<ul style="position: relative; width: 488px; height: 177px;">
				<li style="position: absolute; width: 488px; left: 0px; top: 0px; display: none;"><a  ><img src="images/1.png"></a></li>
				<li style="position: absolute; width: 488px; left: 0px; top: 0px; display: none;"><a  ><img src="images/2.jpg"></a></li>
				<li style="position: absolute; width: 488px; left: 0px; top: 0px; display: none;"><a  ><img src="images/3.jpg"></a></li>
				<li style="position: absolute; width: 488px; left: 0px; top: 0px; display: list-item;"><a  ><img src="images/4.jpg"></a></li>
				<li style="position: absolute; width: 488px; left: 0px; top: 0px; display: none;"><a  ><img src="images/5.jpg"></a></li>
			</ul>
		</div>
	</div>
</body>
</html>





